<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>测试 - layui</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>

<body>

  <div style="margin: 0 auto;">
    <div class="layui-row">
      <!-- 左侧导航部分 -->
      <div class="layui-col-xs2" >
        <div class="layui-side layui-bg-black" >
          <div class="layui-side-scroll" >
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
              <li class="layui-nav-item layui-nav-itemed layui-this"><a href="javascript:;" >船只属性</a></li>
              <!-- <li class="layui-nav-item"><a href="">the links</a></li> -->
            </ul>
          </div>
        </div>
      </div>
      <!-- 右侧表单部分 -->
      <div class="layui-col-xs10">
        <div class="layui-body">
          <form class="layui-form" action="" lay-filter="example">
            <div class="layui-form-item">
              <label class="layui-form-label">船只名称</label>
              <div class="layui-input-block">
                <input type="text" name="shipName" lay-verify="title" autocomplete="off" placeholder="请输入名称"
                  class="layui-input" style="width: 250px;">
              </div>
            </div>

            <div class="layui-form-item">
              <label class="layui-form-label">导入文件</label>
              <div class="layui-input-block">
                <input type="file" @change="upload($event)" style="width: 250px; padding-top: 7px;" class="layui-input"
                  name="file" id="test20">
              </div>
            </div>

            <div class="layui-form-item">
              <label class="layui-form-label">模型类型</label>
              <div class="layui-input-block" style="width: 250px;">
                <select name="model">
                  <option value="model1">模型一</option>
                  <option value="model2">模型二</option>
                  <option value="model3">模型三</option>
                  <option value="model4">模型四</option>
                  <option value="model5">模型五</option>
                </select>
              </div>
            </div>

            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">模型大小</label>
                <div class="layui-input-inline">
                  <input id="modelSize" type="number" max="5" class="layui-input" name="modelSize-input">
                </div>
              </div>
              <div class="layui-inline">
                <div class="layui-input-inline">
                  <div id="ship-slideTest" class="demo-slider" name="modelSize-slider"></div>
                </div>
              </div>
            </div>

            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">显示时间</label>
                <div class="layui-inline" id="time">
                  <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="ship-test5" placeholder="开始日期" name="startTime">
                  </div>
                  <div class="layui-form-mid">-</div>
                  <div class="layui-input-inline">
                    <input type="text" id="ship-test5" class="layui-input" placeholder="结束日期" name="endTime">
                  </div>
                </div>
              </div>
            </div>


            <script type="text/html" id="colorPickerTpl">
              <!-- 这里的 checked 的状态只是演示 -->
            <!-- <div id="color-test2"></div> -->
            <!-- <div id="color-test1"></div> -->
            <!-- <input type="text"> -->
            <!-- <input id="modelSize" type="number" max="5" class="layui-input"> -->
            <!-- 利用layui模板提供的数据可以获得，应数据接口返回的字段名和序号 -->
            <input type="color" name="" id="" value="{{d.color}}" onchange="changeColor('{{d.LAY_INDEX}}',value)">
            </script>

            <div class="layui-form-item">
              <label class="layui-form-label">路线数据</label>
              <div class="layui-input-block">
                <table id="demo" lay-filter="pathdata"></table>
              </div>
            </div>


            <div class="layui-form-item">
              <label class="layui-form-label"></label>
              <div class="layui-input-block">
                <button type="button" id="button1" onclick="add()" class="layui-btn layui-btn-primary">添加</button>
                <button type="button" id="button2" onclick="delData()" class="layui-btn layui-btn-danger">删除</button>
              </div>
            </div>

            <div class="layui-form-item">
              <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-setval">赋值</button>
                <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-getval">取值</button>
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
              </div>
            </div>


            <div class="layui-form-item">
              <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-normal" id="request-create"
                  onclick="createShip()">增加</button>
                <button type="button" class="layui-btn layui-btn-normal" id="request-delete"
                  onclick="deleteShip()">删除</button>
                <button type="button" class="layui-btn layui-btn-normal" id="request-update"
                  onclick="updateShip()">修改</button>
                <button type="button" class="layui-btn layui-btn-normal" id="request-query"
                  onclick="queryShip()">查询</button>
              </div>
            </div>

          </form>
        </div>
      </div>
    </div>


    <!-- <div style="margin-left: 30px;">
  <form class="layui-form" action="">
    <div class="layui-form-item">
      <div class="layui-input-inline" style="width: 120px;">
        <input type="text" value="" placeholder="请选择颜色" class="layui-input" id="test-form-input">
      </div>
      <div class="layui-inline" style="left: -11px;">
        <div id="test-form"></div>
      </div>
    </div>
  </form>
</div> -->



    <!-- 引入 layui.js 的 <script> 标签最好放置在 html 末尾 -->
    <script src="layui/layui.js"></script>
    <script>
      //  表格的数据
      var gridData = [
        {
          lon: 170,
          lat: 15,
          vel: 0.1,
          time: "1/22/2022 12:00:00 AM",
          radius: 0,
          color: "#ff0000",
        },
        {
          lon: 170,
          lat: 15,
          vel: 0.1,
          time: "1/22/2022 12:00:00 AM",
          radius: 0,
          color: "#ff0000",
        },
        {
          lon: 170,
          lat: 15,
          vel: 0.1,
          time: "1/22/2022 12:00:00 AM",
          radius: 0,
          color: "#ff0000",
        },
        {
          lon: 170,
          lat: 15,
          vel: 0.1,
          time: "1/22/2022 12:00:00 AM",
          radius: 0,
          color: "#ff0000",
        },
      ];
      let newData = {
        lon: 170,
        lat: 15,
        vel: 0.1,
        time: "1/22/2022 12:00:00 AM",
        radius: 0,
        color: "#ff0000",
      };

      layui.use(function () {
        var layer = layui.layer
          , form = layui.form
          , laypage = layui.laypage
          , element = layui.element
          , laydate = layui.laydate
          , util = layui.util;



        //输出版本号
        lay('#version').html(layui.v);

        //日期
        laydate.render({
          elem: '#test2'
          , value: new Date()
          , isInitValue: true
        });

        //触发事件
        util.event('test-active', {
          'test-form': function () {
            layer.open({
              type: 1
              , resize: false
              , shadeClose: true
              , area: '350px'
              , title: 'layer + form'
              , content: ['<ul class="layui-form layui-form-pane" style="margin: 15px;">'
                , '<li class="layui-form-item">'
                , '<label class="layui-form-label">输入框</label>'
                , '<div class="layui-input-block">'
                , '<input class="layui-input" lay-verify="required" name="field1">'
                , '</div>'
                , '</li>'
                , '<li class="layui-form-item">'
                , '<label class="layui-form-label">选择框</label>'
                , '<div class="layui-input-block">'
                , '<select name="field2">'
                , '<option value="A">A</option>'
                , '<option value="B">B</option>'
                , '<select>'
                , '</div>'
                , '</li>'
                , '<li class="layui-form-item" style="text-align:center;">'
                , '<button type="submit" lay-submit lay-filter="*" class="layui-btn">提交</button>'
                , '</li>'
                , '</ul>'].join('')
              , success: function (layero, index) {
                layero.find('.layui-layer-content').css('overflow', 'visible');

                form.render().on('submit(*)', function (data) {
                  layer.msg(JSON.stringify(data.field), { icon: 1 });
                  //layer.close(index); //关闭层
                });
              }
            });
          }
        });
      });

      layui.use('colorpicker', function () {
        var $ = layui.$
          , colorpicker = layui.colorpicker;
        //常规使用
        colorpicker.render({
          elem: '#color-test1' //绑定元素
          , change: function (color) { //颜色改变的回调
            layer.tips('选择了：' + color, this.elem, {
              tips: 1
            });
          }
        });

        //初始色值
        colorpicker.render({
          elem: '#color-test2'
          , color: '#2ec770' //设置默认色
          , done: function (color) {
            layer.tips('选择了：' + color, this.elem);
          }
        });

        //表单赋值
        colorpicker.render({
          elem: '#color-test-form'
          , color: '#1c97f5'
          , done: function (color) {
            $('#test-form-input').val(color);
          }
        });

        //RGB 、RGBA
        colorpicker.render({
          elem: '#color-test3'
          , color: 'rgb(68,66,66)'
          , format: 'rgb' //默认为 hex
        });
        colorpicker.render({
          elem: '#color-test4'
          , color: 'rgba(68,66,66,0.5)'
          , format: 'rgb'
          , alpha: true //开启透明度滑块
        });

        //开启透明度
        colorpicker.render({
          elem: '#color-test5'
          , color: '#009688' //hex
          , alpha: true //开启透明度
          , format: 'rgb'
        });
        colorpicker.render({
          elem: '#color-test6'
          , color: 'rgb(0,150,136,0.6)' //rgba
          , alpha: true
          , format: 'rgb'
        });
        colorpicker.render({ //无初始色值时
          elem: '#color-test7'
          , alpha: true
          , format: 'rgb'
        });

        //预定义颜色项
        colorpicker.render({
          elem: '#color-test8'
          , color: '#c71585'
          , predefine: true // 开启预定义颜色
        });
        colorpicker.render({
          elem: '#color-test9'
          , color: '#9d8a0e'
          , predefine: true // 开启预定义颜色
          , colors: ['#ff8c00', '#00ced1', '#9d8a0e'] //自定义预定义颜色项
        });

        //开启全功能
        colorpicker.render({
          elem: '#color-test-all'
          , color: 'rgba(7, 155, 140, 1)'
          , format: 'rgb'
          , predefine: true
          , alpha: true
          , done: function (color) {
            $('#test-all-input').val(color); //向隐藏域赋值
            layer.tips('给指定隐藏域设置了颜色值：' + color, this.elem);

            color || this.change(color); //清空时执行 change
          }
          , change: function (color) {
            //给当前页面头部和左侧设置主题色
            $('.header-demo,.layui-side .layui-nav').css('background-color', color);
          }
        });

        //设定颜色框尺寸
        colorpicker.render({
          elem: '#color-test10'
          , size: 'lg' //大号下拉框
        });
        colorpicker.render({
          elem: '#vtest11'
          //,size: 'sm' //默认 sm
        });
        colorpicker.render({
          elem: '#color-test12'
          , size: 'xs' //mini下拉框
        });
      });

      layui.use('slider', function () {
        var $ = layui.$
          , slider = layui.slider;

        //设置最大最小值
        slider.render({
          elem: '#ship-slideTest'
          , min: 0 //最小值
          , max: 5 //最大值
          , value: 4
          , change: function (value) {
            $('#modelSize').val(value);
          }
        });

      });

      layui.use('laydate', function () {


        var laydate = layui.laydate;


        //日期时间选择器
        laydate.render({
          elem: '#ship-test5'
          , type: 'datetime'
        });



        //初始赋值
        laydate.render({
          elem: '#test19'
          , value: '1989-10-14'
          , isInitValue: true
        });

        //选中后的回调
        laydate.render({
          elem: '#test20'
          , done: function (value, date) {
            layer.alert('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date));
          }
        });

        //日期切换的回调
        laydate.render({
          elem: '#test21'
          , change: function (value, date) {
            layer.msg('你选择的日期是：' + value + '<br><br>获得的对象是' + JSON.stringify(date));
          }
        });


        //自定义事件
        laydate.render({
          elem: '#test24'
          , trigger: 'mousedown'
        });

        //点我触发
        laydate.render({
          elem: '#test25'
          , eventElem: '#test25-1'
          , trigger: 'click'
        });


        //日期只读
        laydate.render({
          elem: '#test27'
          , trigger: 'click'
        });

        //非input元素
        laydate.render({
          elem: '#test28'
        });


      });

      layui.use(['table', 'util'], function () {
        var table = layui.table
          , util = layui.util;

        //第一个实例
        table.render({
          elem: '#demo'
          , width: 850
          , height: 236
          , data: gridData //本地提供数据
          , page: false //不开启分页
          , cols: [[ //表头
            { field: 'lon', title: '经度(°)', sort: true, edit: "text" }
            , { field: 'lat', title: '纬度(°)', sort: true, edit: "text" }
            , { field: 'vel', title: '速度(km/sec)', sort: true, width: 150, edit: "text" }
            , { field: 'time', title: '时间', width: 230 }
            , { field: 'radius', title: '转弯半径(km)', sort: true, width: 150, edit: "text" }
            , { field: 'color', title: '颜色', sort: true, templet: '#colorPickerTpl' }
          ]]
        });
        //监听单元格编辑
        table.on('edit(pathdata)', function (obj) {
          var value = obj.value //得到修改后的值
            , data = obj.data //得到所在行所有键值
            , field = obj.field; //得到字段
          layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改值为：' + util.escape(value));
        });

      });

      layui.use(['form'], function () {
        var form = layui.form
          , layer = layui.layer

        //表单赋值
        layui.$('#LAY-component-form-setval').on('click', function () {
          layer.msg('赋值了');
          form.val('example', {
            "shipName": "ship-1"
            , "model": 'model2'
            , "modelSize-input": 4
            , "startTime": '2022-02-28 16:51:35'
            , "endTime": '2022-02-28 16:51:35'
          });
        });

        //表单取值
        layui.$('#LAY-component-form-getval').on('click', function () {
          var data = form.val('example');
          alert(JSON.stringify(data));
        });
      });

    </script>

    <script type="text/javascript">
      //取得表格的对象，便于调它的重载方法
      var $ = layui.$,
        table = layui.table;

      var form = layui.form
        , layer = layui.layer

      function add() {
        gridData.push(newData);
        // 添加完newData对象后，重置newData对象
        newData = {
          lon: 170,
          lat: 15,
          vel: 0.1,
          time: "1/22/2022 12:00:00 AM",
          radius: 0,
          color: "#ff0000",
        };
        console.log(gridData);
        // var $ = layui.$,
        //   table = layui.table;

        //在你需要重置表格的前面加上代码

        // var scrollTop = 0;
        // var layuiTable = $('.layui-table-main');
        // if (layuiTable != null && layuiTable.length > 0) {
        //   scrollTop = layuiTable[0].scrollTop;

        // }

        table.reload('demo');
        // table.reload({
        //   data: gridData
        // });
      }

      function delData() {

        // 删一个数组元素
        gridData.pop();
        console.log(gridData);
        table.reload('demo');
      }

      function changeColor(a, val) {
        //把对应数组的颜色属性也修改一下
        console.log(a)
        gridData[a - 1].color = val;
      }
      //查询船只
      function queryShip() {
        //查询这只船
        $.ajax({
          // url
          url: 'http://124.223.106.40:7000/api/6218aac44b109235cca953f7/Ships/6218d294f956649bd00f45da',
          // 参数
          //data: { a: 100, b: 200 },
          // 请求类型
          type: 'GET',
          // 响应体结果
          dataType: 'json',
          // 成功的回调
          success: function (data) {
            console.log(data);
            console.log(data.name)
            //查到后应该用查到的数据来填充数组
            layui.use(['form'], function () {
              var form = layui.form
                , layer = layui.layer
              //表单赋值
              layer.msg('赋值了');
              form.val('example', {
                "shipName": data.name
                , "model": 'model2'
                , "modelSize-input": 4
                , "startTime": '2022-02-28 16:51:35'
                , "endTime": '2022-02-28 16:51:35'
              });
            });
          },
          // 超时时间
          //timeout: 2000,
          // 失败的回调
          error: function () { console.log('出错拉~'); }

        })
      }
      //添加船只
      function createShip() {

        var testCreateDate = {
          "name": "ship-6",
          "description": "ajax增加一个船只",
          "properties": {
            "dataProperty": {
              "lonLatHeightDatas": [
                {
                  "x": 0,
                  "y": 0
                }
              ]
            },
            "displayProperty": {
              "fontElement": {
                "showProperty": true,
                "fontName": "string",
                "fontSize": 0,
                "fontColor": {
                  "r": 1,
                  "g": 1,
                  "b": 1,
                  "a": 1
                }
              },
              "d2ModelElement": {
                "modelUrl": "string",
                "modelScale": 0
              },
              "d3ModelElement": {
                "modelUrl": "string",
                "modelScale": 0
              },
              "lineProperty": {
                "showProperty": true,
                "lineStyle": "string",
                "lineWidth": 0,
                "lineColor": {
                  "r": 1,
                  "g": 1,
                  "b": 1,
                  "a": 1
                }
              }
            },
            "workStateProperty": {
              "workTimeData": [
                {
                  "startTime": "2022-03-01T02:02:55.267Z",
                  "endTime": "2022-03-01T02:02:55.267Z"
                }
              ]
            }
          }
        }

        $.ajax({
          // url
          url: 'http://124.223.106.40:7000/api/6218aac44b109235cca953f7/Ships',
          // 参数
          data: testCreateDate,
          // 请求类型
          type: 'POST',
          // 响应体结果
          dataType: 'json',
          // 成功的回调
          success: function (data) { console.log(data); },
          // 失败的回调
          error: function () { console.log('出错拉~'); },
        })
      }
      //更新船只
      function updateShip() {
        var testUpdateDate = {
          "name": "string",
          "description": "更新船只",
          "properties": {
            "dataProperty": {
              "lonLatHeightDatas": [
                {
                  "x": 0,
                  "y": 0
                }
              ]
            },
            "displayProperty": {
              "fontElement": {
                "showProperty": true,
                "fontName": "string",
                "fontSize": 0,
                "fontColor": {
                  "r": 1,
                  "g": 1,
                  "b": 1,
                  "a": 1
                }
              },
              "d2ModelElement": {
                "modelUrl": "string",
                "modelScale": 0
              },
              "d3ModelElement": {
                "modelUrl": "string",
                "modelScale": 0
              },
              "lineProperty": {
                "showProperty": true,
                "lineStyle": "string",
                "lineWidth": 0,
                "lineColor": {
                  "r": 1,
                  "g": 1,
                  "b": 1,
                  "a": 1
                }
              }
            },
            "workStateProperty": {
              "workTimeData": [
                {
                  "startTime": "2022-03-01T12:41:29.745Z",
                  "endTime": "2022-03-01T12:41:29.745Z"
                }
              ]
            }
          }
        }
        $.ajax({
          // url
          url: 'http://124.223.106.40:7000/api/6218aac44b109235cca953f7/Ships?Id=621d80a71531695bd871cab4',
          // 参数
          data: testUpdateDate,
          // 请求类型
          type: 'PUT',
          // 响应体结果
          dataType: 'json',
          // 成功的回调
          success: function (data) { console.log(data); },
          // 失败的回调
          error: function () { console.log('出错拉~'); },
        })
      }
      //删除船只
      function deleteShip(){
        $.ajax({
          // url
          url: 'http://124.223.106.40:7000/api/6218aac44b109235cca953f7/Ships/621d80a71531695bd871cab4',
          // 请求类型
          type: 'DELETE',
          // 响应体结果
          dataType: 'json',
          // 成功的回调
          success: function (data) { console.log(data); },
          // 失败的回调
          error: function () { console.log('出错拉~'); },
        })
      }
    </script>





</body>

</html>